<template>
  <div class="attentions">
    <input type="radio" id="my-attention" name="class" class="class" checked="checked" />
    <input type="radio" id="my-fans" name="class" class="class" />
    <div class="header">
      <label class="label" id="my-attention-label" for="my-attention" @click="loadMyAttentions">我关注的</label>
      <span class="delimiter">|</span>
      <label class="label" id="my-fans-label" for="my-fans" @click="loadMyFans">我的粉丝</label>
    </div>
    <br/>
    <user-lister v-bind:users="users"></user-lister>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="limit"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import UserLister from '@/components/UserLister'
export default {
  name: 'Attentions',
  components: {
    UserLister
  },
  data () {
    return {
      users: [{
        nickname: 'hello',
        signature: '生吃个人我很抱歉'
      }, {
        nickname: '123',
        signature: '生吃个人我很抱歉'
      }, {
        nickname: 'aaa',
        signature: '生吃个人我很抱歉'
      }],
      start: 0,
      limit: 20,
      total: 0
    }
  },
  methods: {
    loadMyAttentions () {
      this.users = [{
        nickname: 'hello',
        signature: '生吃个人我很抱歉'
      }, {
        nickname: '123',
        signature: '生吃个人我很抱歉'
      }, {
        nickname: 'aaa',
        signature: '生吃个人我很抱歉'
      }]
    },
    loadMyFans () {
      this.users = [{
        nickname: '我的粉丝',
        signature: '生吃个人我很抱歉'
      }, {
        nickname: '我的粉丝',
        signature: '生吃个人我很抱歉'
      }, {
        nickname: '我的粉丝',
        signature: '生吃个人我很抱歉'
      }]
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.start = this.limit * (val - 1) // val 页面
      this.load()
    }
  }
}
</script>

<style scoped>
  .class{
    display: none;
  }

  .attentions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-basis: auto;
  }
  .label,.delimiter{
    margin: 0 0.5rem;
    font-size: 1.3rem;
  }
  .label {
    font-weight: normal;
    cursor: pointer;
  }

  #my-attention:checked ~ .header #my-attention-label {
    font-weight: bold;
  }
  #my-fans:checked ~ .header #my-fans-label {
    font-weight: bold;
  }

  .label:hover {
    color: aqua;
  }
</style>
